<template>
	<view class="dataAnalysis ">
		<view :style="{height: getNavBarHeight()+'px'}"></view>
		<view class="navbar">
			<view class="item " :class="{active:current===0}" @click="setActive(0)">今日</view>
			<view class="item " :class="{active:current===1}" @click="setActive(1)">近一周</view>
			<view class="item " :class="{active:current===2}" @click="setActive(2)">近一月</view>
			<view class="item " :class="{active:current===3}" @click="setActive(3)">近一年</view>
		</view>
		<view class="echarts pageBg">
			<view class="box1">
				<view class="header">
					<view class="left">近七日统计</view>
					<view class="itembar">
						<view class="zhichu" :class="{active:selectBar===0}" @click="setSelectBar(0)">支出</view>
						<view class="shouru" :class="{active:selectBar===1}" @click="setSelectBar(1)">收入</view>
					</view>
				</view>
				<!-- <view class="echarts-1" ref="echarts1" style="width: 100%;height: 300rpx;"></view> -->
				<view style="height: 300rpx;">
					<LEchart ref="chart1" @finished="init"></LEchart>
				</view>
				<view class="footer">
					<view class="item">总支出：111.11</view>
					<view class="item">日均支出：111.11</view>
					<view class="item">总收入：111.11</view>
					<view class="item">日均收入：111.11</view>
				</view>
			</view>
			<view class="box">
				<view class="header">
					<view class="left">收支走势</view>
				</view>
				<view style="height: 400rpx;">
					<LEchart ref="chart2" style="" @finished="init"></LEchart>
				</view>
			</view>
			<view class="box">
				<view class="header">
					<view class="left">支出占比</view>
				</view>
				<view style="height: 400rpx;">
					<LEchart ref="chart3" style="" @finished="init"></LEchart>
				</view>
			</view>
			<view class="boxList">
				<view class="header" @click="openList">
					<view class="left">支出数据</view>
					<uni-icons type="down" size="20" v-if="open"></uni-icons>
					<uni-icons type="up" size="20" v-else></uni-icons>
				</view>
				<view class="list" v-if="open==true">
					<view class="item" v-for="item in 4">
						<view class="left">
							<view class="icon">
								<uni-icons type="wallet-filled" size="30"></uni-icons>
							</view>
							<view class="content">
								<view class="title">食品餐饮
									<text class="info">11笔&nbsp;&nbsp;11.1%</text>
								</view>
								<view class="precent" style="">
									<view
										style="width: 60%;background-color: #47ab93; height: 100%; border-radius: 20rpx;">
									</view>
								</view>
							</view>
						</view>
						<view class="right">-111.111</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import { getNavBarHeight } from '@/utils/system.js'
	import { ref, onMounted, reactive } from "vue"
	// lime-echart是一个demo的组件，用于测试组件
	import LEchart from '@/components/l-echart/l-echart.vue'
	// nvue 不需要引入
	// #ifdef VUE3
	// #ifdef MP
	// 由于vue3 使用vite 不支持umd格式的包，小程序依然可以使用，但需要使用require
	const echarts = require('../../static/static/echarts.min.js');
	// #endif
	// #ifndef MP
	// 由于 vue3 使用vite 不支持umd格式的包，故引入npm的包
	import * as echarts from 'echarts';
	// #endif
	// #endif
	// import * as echarts from 'echarts'
	const items = ['支出', '收入']
	//导航栏
	const current = ref(1)
	const setActive = (index) => {
		console.log(index)
		current.value = index
	}
	//收入支出
	const selectBar = ref(1)
	const setSelectBar = index => {
		selectBar.value = index
	}
	onMounted(() => {
		chart1.value.init(echarts, chart1 => {
			chart1.setOption(state1.option)
		})
		chart2.value.init(echarts, chart2 => {
			chart2.setOption(state2.option)
		})
		chart3.value.init(echarts, chart3 => {
			chart3.setOption(state3.option)
		})
	})
	//挂载图表1（统计）
	let chart1 = ref();
	const state1 = reactive({
		option: {}
	})
	// 挂载图表2
	let chart2 = ref()
	const state2 = reactive({
		option: {}
	})
	//挂载图表3
	let chart3 = ref()
	const state3 = reactive({
		option: {}
	})
	//图表1配置
	state1.option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true,
			show: false,
		},
		xAxis: {
			type: 'category',
			data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
			axisTick: {
				show: false
			},
		},
		yAxis: {
			type: 'value',
			show: false,
			axisTick: {
				show: false
			},
			axisLabel: {
				show: false
			},
			splitLine: {
				show: false
			}
		},
		series: [{
			name: '支出',
			type: 'bar',
			barWidth: '25rpx',
			itemStyle: {
				color: '#47ab93',
				borderRadius: [5, 5, 0, 0]
			},
			label: {
				show: true,
				position: 'top',
				textStyle: {
					color: 'black',
					fontSize: 14,
					fontWeight: 700
				}
			},
			data: [120, 150, 130, 110, 140, 160, 180],
		}]
	}
	//图表2配置
	state2.option = {
		tooltip: {
			trigger: 'axis',
		},
		legend: {
			data: ['支出', '收入']
		},
		grid: {
			left: '3%',
			right: '8%',
			bottom: '3%',
			containLabel: true,
			show: false,
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
			axisTick: {
				show: false
			}
		},
		yAxis: {
			type: 'value',
			// show: false,
			axisTick: {
				show: false
			},
			splitLine: {
				show: false
			}
		},
		series: [{
				name: '支出',
				type: 'line',
				data: [12, 132, 1, 134, 90, 230, 20],
				smooth: true,
				showSymbol: false,
				itemStyle: {
					color: '#43b090'
				},
				areaStyle: {
					color: '#43b090'
				}
			},
			{
				name: '收入',
				type: 'line',
				data: [120, 18, 191, 24, 290, 3, 310],
				smooth: true,
				showSymbol: false,
				itemStyle: {
					color: '#f55859'
				},
				areaStyle: {
					color: '#f55859'
				}
			},
		]
	}
	state3.option = {
		tooltip: {
			trigger: 'item'
		},
		series: [{
			// name: '',
			type: 'pie',
			radius: ['40%', '70%'],
			center: ['50%', '50%'],
			itemStyle: {
				borderRadius: 5,
				borderColor: '#fff',
				borderWidth: 1
			},
			label: {
				show: true,
				fontWeight: 700,
				fontSize: 12,
			},
			data: [
				{ value: 1048, name: '其他' },
				{ value: 735, name: '食品餐饮' },
				{ value: 580, name: '出行交通' },
				{ value: 484, name: '休闲娱乐' },
				{ value: 300, name: '购物消费' }
			]
		}]
	}
	const open = ref(true)
	const openList = () => {
		open.value = !open.value
	}
</script>

<style lang="scss" scoped>
	.dataAnalysis {
		.navbar {
			display: flex;
			background: #fff;
			padding: 10rpx 30rpx;
			box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, .3);

			.item {
				font-size: 26rpx;
				padding: 10rpx 20rpx;
				margin-left: 5rpx;
				font-weight: 700;
				color: #616161;
				border-radius: 2rpx 20rpx 2rpx 20rpx;
			}

			.active {
				background: #47ab93;
				color: #fff;
			}
		}

		.echarts {
			padding: 30rpx;

			.box1 {
				padding: 20rpx;
				// height: 500rpx;
				background: #fff;
				border-radius: 20rpx;

				.header {
					display: flex;
					justify-content: space-between;
					// align-items: center;

					.left {
						font-size: 28rpx;
						font-weight: 700;
					}

					.itembar {

						display: flex;
						// padding: 5rpx;
						border-radius: 20rpx;
						font-size: 22rpx;
						border: 1px solid #49ad92;
						background-color: #edf6f5;

						.zhichu,
						.shouru {
							border-radius: 10rpx;
							padding: 10rpx 15rpx;
							// border: 1px solid #49ad92;
							// width: 100rpx;
							text-align: center;

							color: #49ad92;
						}

						.active {
							background: #47ab93;
							color: #fff;
							// border-radius: 10rpx;

						}
					}
				}

				.echarts1 {
					width: 100%;
					height: 500rpx;
				}

				.footer {
					padding-top: 30rpx;
					font-weight: 700;
					font-size: 32rpx;
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: 30rpx;

					.item {
						margin-left: 20rpx;
						display: flex;
						align-items: center;
						height: 50rpx;
					}
				}
			}

			.box {
				margin-top: 30rpx;
				padding: 30rpx;
				background: #fff;
				border-radius: 20rpx;

				.header {
					// padding: 20rpx;
					display: flex;
					justify-content: space-between;
					// align-items: center;

					.left {
						font-size: 28rpx;
						font-weight: 700;
					}

				}
			}

			.boxList {
				margin-top: 30rpx;
				padding: 30rpx;
				background: #fff;
				border-radius: 20rpx;

				.header {
					display: flex;
					align-items: center;
					font-weight: 700;

					.left {
						margin-right: 10rpx;
						font-size: 28rpx;
					}
				}

				.list {
					// height: 100rpx;
					padding: 20rpx;
					padding-bottom: 0;

					.item {
						// border: 1px solid #ccc;
						border-bottom: 1rpx solid #f0f0f0;
						height: 100rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left {
							display: flex;
							align-items: center;

							.icon {
								padding: 20rpx;
								width: 40rpx;
								height: 40rpx;
								// border: 1rpx solid #ccc;
								display: flex;
								justify-content: center;
								align-items: center;
							}

							.content {
								min-width: 280rpx;

								.title {
									font-weight: 700;

									.info {
										color: #828282;
										font-size: 22rpx;
									}
								}

								.precent {
									margin-top: 10rpx;
									// width: 400rpx;
									height: 10rpx;
									// border: 1rpx solid #eaeaea;
									border-radius: 20rpx;
								}
							}

						}

						.right {
							font-weight: 700;
							font-size: 35rpx;
							color: #47ab93;
						}
					}

					.item:last-child {
						border: none;
					}
				}
			}
		}


	}
</style>